/* 
    内嵌式迷你 base.css
*/
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
/* 样式代码 */
body {
  background-image: url(../images/王者荣耀背景.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
div {
  width: 650px;
  height: 650px;
  margin: 50px auto;
  border-radius: 50%;
  background-color: rgba(66, 93, 140, 0.5);
  border: 5px solid rgba(66, 93, 140, 0.8);
  box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  position: relative;
}
div::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 100px;
  height: 650px;
  background-color: rgba(144, 174, 227, 0.3);
  transform: skew(-45deg);
  animation: afterAnim 2s infinite;
}
.box {
  display: flex;
  flex-wrap: wrap;
  width: 650px;
  height: 650px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.box li {
  margin-right: 20px;
  width: 100px;
  height: 100px;
  animation: liAnim 1s 1s infinite alternate;
}
.box li img {
  animation: imgAnim 1s;
  box-sizing: border-box;
  margin: -5px 0 0 -5px;
  width: 100px;
  height: 100px;
  border: 5px double #0a2a71;
  border-radius: 20px 0 20px 0;
  box-shadow: 0 0 3px 1px;
  transition: all 0.3s;
}
.box li:hover img {
  transform: scale(130%);
}
@keyframes imgAnim {
  from {
    width: 1px;
    height: 1px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}
@keyframes liAnim {
  to {
    transform: translateY(-10px);
  }
}
@keyframes afterAnim {
  to {
    top: 65%;
    left: 110%;
  }
}
